<template>
  <el-card>
    <slot slot="header" name="header" />
    <slot name="table" />
    <Pagination
      :total="total"
      :page-size="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    total: { type: Number, default: 0 },
    pageSize: { type: Number, default: 10 },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: { type: Array, default: () => [1, 10, 30, 50, 100] }
  },
  methods: {
    handleSizeChange(size) {
      const vm = this
      vm.$emit('sizeChange', size)
    },
    handleCurrentChange(current) {
      const vm = this
      vm.$emit('currentChange', current)
    }
  }
}
</script>

<style lang="scss" scoped></style>
